/**
 * 主题系统 - CSS变量定义
 * 支持浅色和深色主题切换
 */

/* 浅色主题变量 */
:root,
.theme-light {
  /* 背景色 */
  --bg-primary: #ffffff;
  --bg-secondary: #f0f2f5;
  --bg-tertiary: #fafafa;
  --bg-card: #ffffff;
  --bg-hover: #f5f7fa;
  --bg-active: #ecf5ff;
  
  /* 文本色 */
  --text-primary: #303133;
  --text-secondary: #606266;
  --text-tertiary: #909399;
  --text-disabled: #c0c4cc;
  --text-inverse: #ffffff;
  
  /* 边框色 */
  --border-color: #dcdfe6;
  --border-color-light: #e4e7ed;
  --border-color-lighter: #ebeef5;
  --border-color-extra-light: #f2f6fc;
  
  /* 主色调 */
  --color-primary: #409eff;
  --color-primary-light: #66b1ff;
  --color-primary-lighter: #a0cfff;
  --color-primary-dark: #337ecc;
  
  /* 功能色 */
  --color-success: #67c23a;
  --color-warning: #e6a23c;
  --color-danger: #f56c6c;
  --color-info: #909399;
  
  /* 阴影 */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.15);
  
  /* 侧边栏 */
  --sidebar-bg: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  --sidebar-text: rgba(255, 255, 255, 0.75);
  --sidebar-text-active: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.1);
  
  /* 头部 */
  --header-bg: #ffffff;
  --header-text: #303133;
  --header-border: #e4e7ed;
  
  /* 滚动条 */
  --scrollbar-track: #f1f1f1;
  --scrollbar-thumb: #c0c4cc;
  --scrollbar-thumb-hover: #909399;
}

/* 深色主题变量 - 优化为更柔和的暗色主题 */
.theme-dark {
  /* 背景色 - 使用更亮的灰色调，不那么暗 */
  --bg-primary: #2d3748;
  --bg-secondary: #1a202c;
  --bg-tertiary: #2d3748;
  --bg-card: #2d3748;
  --bg-hover: rgba(255, 255, 255, 0.12);
  --bg-active: rgba(96, 165, 250, 0.25);
  
  /* 文本色 - 优化对比度，确保在深色背景上清晰可读 */
  --text-primary: #f7fafc;
  --text-secondary: #e2e8f0;
  --text-tertiary: #cbd5e1;
  --text-disabled: #a0aec0;
  --text-inverse: #1a202c;
  
  /* 边框色 - 稍微增强可见性 */
  --border-color: rgba(255, 255, 255, 0.15);
  --border-color-light: rgba(255, 255, 255, 0.12);
  --border-color-lighter: rgba(255, 255, 255, 0.08);
  --border-color-extra-light: rgba(255, 255, 255, 0.05);
  
  /* 主色调 */
  --color-primary: #60a5fa;
  --color-primary-light: #93c5fd;
  --color-primary-lighter: #bfdbfe;
  --color-primary-dark: #3b82f6;
  
  /* 功能色 */
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-danger: #fb7185;
  --color-info: #94a3b8;
  
  /* 阴影 - 稍微减轻阴影强度 */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.4);
  
  /* 侧边栏（深色主题下使用更柔和的颜色） */
  --sidebar-bg: linear-gradient(180deg, #2d3748 0%, #1a202c 100%);
  --sidebar-text: rgba(255, 255, 255, 0.8);
  --sidebar-text-active: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.12);
  
  /* 头部 */
  --header-bg: rgba(45, 55, 72, 0.95);
  --header-text: #f7fafc;
  --header-border: rgba(255, 255, 255, 0.12);
  
  /* 滚动条 */
  --scrollbar-track: rgba(26, 32, 44, 0.6);
  --scrollbar-thumb: rgba(96, 165, 250, 0.4);
  --scrollbar-thumb-hover: rgba(96, 165, 250, 0.6);
}

/* 全局样式应用 - 确保html和body都应用主题背景 */
html {
  background-color: var(--bg-secondary);
  transition: background-color 0.3s ease;
}

body {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
  min-height: 100vh;
}

#app {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
  min-height: 100vh;
}

/* 卡片样式 */
.theme-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color-light);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.theme-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-color);
}

/* 输入框样式 */
.theme-input {
  background-color: var(--bg-primary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.theme-input:focus {
  border-color: var(--color-primary);
}

/* 按钮样式 */
.theme-button-primary {
  background-color: var(--color-primary);
  color: var(--text-inverse);
  border-color: var(--color-primary);
}

.theme-button-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* 文本样式 */
.theme-text-primary {
  color: var(--text-primary);
}

.theme-text-secondary {
  color: var(--text-secondary);
}

.theme-text-tertiary {
  color: var(--text-tertiary);
}

/* 边框样式 */
.theme-border {
  border-color: var(--border-color);
}

.theme-border-light {
  border-color: var(--border-color-light);
}

/* 滚动条样式（全局） */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
  transition: background 0.3s;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Element Plus 组件主题适配 */
.theme-dark .el-card {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color-light) !important;
  color: var(--text-primary) !important;
}

.theme-dark .el-card__header {
  border-bottom-color: var(--border-color-light) !important;
  color: var(--text-primary) !important;
  background-color: var(--bg-card) !important;
}

.theme-dark .el-card__body {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

.theme-dark .el-input__wrapper {
  background-color: var(--bg-primary) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 0 0 1px var(--border-color) inset !important;
}

.theme-dark .el-input__inner {
  color: var(--text-primary) !important;
}

.theme-dark .el-input__inner::placeholder {
  color: var(--text-tertiary) !important;
}

.theme-dark .el-select .el-input__wrapper {
  background-color: var(--bg-primary) !important;
  border-color: var(--border-color) !important;
}

.theme-dark .el-select-dropdown {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color-light) !important;
}

.theme-dark .el-select-dropdown__item {
  color: var(--text-primary) !important;
  background-color: var(--bg-card) !important;
}

.theme-dark .el-select-dropdown__item:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

.theme-dark .el-select-dropdown__item.is-selected {
  background-color: var(--bg-active) !important;
  color: var(--color-primary) !important;
}

.theme-dark .el-button {
  border-color: var(--border-color) !important;
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.theme-dark .el-button--primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
}

.theme-dark .el-button--primary:hover {
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
}

.theme-dark .el-button:not(.el-button--primary):hover {
  background-color: var(--bg-hover) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.theme-dark .el-table {
  background-color: var(--bg-card);
  color: var(--text-primary);
}

.theme-dark .el-table th {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-bottom-color: var(--border-color);
}

.theme-dark .el-table td {
  border-bottom-color: var(--border-color-light);
}

.theme-dark .el-table__row:hover > td {
  background-color: var(--bg-hover);
}

.theme-dark .el-menu {
  background-color: transparent;
  border-color: var(--border-color);
}

.theme-dark .el-menu-item {
  color: var(--text-secondary);
}

.theme-dark .el-menu-item:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.theme-dark .el-menu-item.is-active {
  background-color: var(--bg-active);
  color: var(--color-primary);
}

.theme-dark .el-tag {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.theme-dark .el-dialog {
  background-color: var(--bg-card);
  color: var(--text-primary);
}

.theme-dark .el-dialog__header {
  border-bottom-color: var(--border-color-light);
}

.theme-dark .el-dialog__title {
  color: var(--text-primary);
}

.theme-dark .el-form-item__label {
  color: var(--text-primary);
}

.theme-dark .el-textarea__inner {
  background-color: var(--bg-primary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.theme-dark .el-dropdown-menu {
  background-color: var(--bg-card);
  border-color: var(--border-color-light);
}

.theme-dark .el-dropdown-menu__item {
  color: var(--text-primary);
}

.theme-dark .el-dropdown-menu__item:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.theme-dark .el-pagination {
  color: var(--text-primary);
}

.theme-dark .el-pagination .el-pager li {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.theme-dark .el-pagination .el-pager li.is-active {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
}

.theme-dark .el-pagination .btn-prev,
.theme-dark .el-pagination .btn-next {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.theme-dark .el-pagination .btn-prev:hover,
.theme-dark .el-pagination .btn-next:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

/* 日期选择器适配 */
.theme-dark .el-date-picker {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color-light) !important;
}

.theme-dark .el-picker__panel {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color-light) !important;
}

.theme-dark .el-picker__panel__content {
  color: var(--text-primary) !important;
}

.theme-dark .el-date-table td {
  color: var(--text-primary) !important;
}

.theme-dark .el-date-table td.available:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

.theme-dark .el-date-table td.current:not(.disabled) {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
}

.theme-dark .el-date-table td.today span {
  color: var(--color-primary) !important;
}

/* 时间选择器适配 */
.theme-dark .el-time-picker {
  background-color: var(--bg-primary) !important;
  border-color: var(--border-color) !important;
}

.theme-dark .el-time-spinner__item {
  color: var(--text-primary) !important;
}

.theme-dark .el-time-spinner__item:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

.theme-dark .el-time-spinner__item.active:not(.disabled) {
  color: var(--color-primary) !important;
}

/* 级联选择器适配 */
.theme-dark .el-cascader__dropdown {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color-light) !important;
}

.theme-dark .el-cascader-menu {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color-light) !important;
}

.theme-dark .el-cascader-node {
  color: var(--text-primary) !important;
}

.theme-dark .el-cascader-node:hover {
  background-color: var(--bg-hover) !important;
}

.theme-dark .el-cascader-node.is-selectable.in-check-path {
  color: var(--color-primary) !important;
}

/* 树形控件适配 */
.theme-dark .el-tree {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

.theme-dark .el-tree-node__content {
  color: var(--text-primary) !important;
}

.theme-dark .el-tree-node__content:hover {
  background-color: var(--bg-hover) !important;
}

.theme-dark .el-tree-node.is-current > .el-tree-node__content {
  background-color: var(--bg-active) !important;
  color: var(--color-primary) !important;
}

/* 步骤条适配 */
.theme-dark .el-steps {
  color: var(--text-primary) !important;
}

.theme-dark .el-step__title {
  color: var(--text-primary) !important;
}

.theme-dark .el-step__description {
  color: var(--text-secondary) !important;
}

/* 时间线适配 */
.theme-dark .el-timeline {
  color: var(--text-primary) !important;
}

.theme-dark .el-timeline-item__timestamp {
  color: var(--text-secondary) !important;
}

.theme-dark .el-timeline-item__content {
  color: var(--text-primary) !important;
}

/* 分割线适配 */
.theme-dark .el-divider {
  border-color: var(--border-color-light) !important;
}

/* 骨架屏适配 */
.theme-dark .el-skeleton__item {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 37%, var(--bg-tertiary) 63%) !important;
}

/* 警告提示适配 */
.theme-dark .el-alert {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color-light) !important;
  color: var(--text-primary) !important;
}

.theme-dark .el-alert__title {
  color: var(--text-primary) !important;
}

.theme-dark .el-alert__description {
  color: var(--text-secondary) !important;
}

/* 面包屑适配 */
.theme-dark .el-breadcrumb {
  color: var(--text-primary) !important;
}

.theme-dark .el-breadcrumb__inner {
  color: var(--text-primary) !important;
}

.theme-dark .el-breadcrumb__inner.is-link {
  color: var(--color-primary) !important;
}

.theme-dark .el-breadcrumb__inner.is-link:hover {
  color: var(--color-primary-light) !important;
}

/* 标签页适配增强 */
.theme-dark .el-tabs__active-bar {
  background-color: var(--color-primary) !important;
}

.theme-dark .el-tabs__content {
  color: var(--text-primary) !important;
}

/* 进度条适配 */
.theme-dark .el-progress {
  color: var(--text-primary) !important;
}

.theme-dark .el-progress__text {
  color: var(--text-primary) !important;
}

/* 评分组件适配 */
.theme-dark .el-rate {
  color: var(--text-primary) !important;
}

.theme-dark .el-rate__icon {
  color: var(--text-tertiary) !important;
}

/* 滑块适配 */
.theme-dark .el-slider {
  color: var(--text-primary) !important;
}

.theme-dark .el-slider__runway {
  background-color: var(--bg-tertiary) !important;
}

.theme-dark .el-slider__bar {
  background-color: var(--color-primary) !important;
}

.theme-dark .el-slider__button {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* 开关适配 */
.theme-dark .el-switch {
  --el-switch-on-color: var(--color-primary) !important;
}

/* 上传组件适配 */
.theme-dark .el-upload {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.theme-dark .el-upload:hover {
  border-color: var(--color-primary) !important;
}

/* 颜色选择器适配 */
.theme-dark .el-color-picker {
  background-color: var(--bg-primary) !important;
  border-color: var(--border-color) !important;
}

.theme-dark .el-color-picker__panel {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color-light) !important;
}

/* 穿梭框适配 */
.theme-dark .el-transfer {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color-light) !important;
}

.theme-dark .el-transfer-panel {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color-light) !important;
}

.theme-dark .el-transfer-panel__header {
  background-color: var(--bg-tertiary) !important;
  border-bottom-color: var(--border-color-light) !important;
  color: var(--text-primary) !important;
}

.theme-dark .el-transfer-panel__body {
  background-color: var(--bg-card) !important;
}

.theme-dark .el-transfer-panel__list {
  background-color: var(--bg-card) !important;
}

.theme-dark .el-transfer-panel__item {
  color: var(--text-primary) !important;
}

.theme-dark .el-transfer-panel__item:hover {
  background-color: var(--bg-hover) !important;
}

/* 确保所有输入框在深色主题下都有正确的背景和文字颜色 */
.theme-dark input,
.theme-dark textarea {
  background-color: var(--bg-primary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.theme-dark input::placeholder,
.theme-dark textarea::placeholder {
  color: var(--text-tertiary) !important;
}

/* 确保所有链接在深色主题下都有正确的颜色 */
.theme-dark a {
  color: var(--color-primary) !important;
}

.theme-dark a:hover {
  color: var(--color-primary-light) !important;
}

/* 更多Element Plus组件适配 */
.theme-dark .el-radio {
  color: var(--text-primary) !important;
}

.theme-dark .el-radio__label {
  color: var(--text-primary) !important;
}

.theme-dark .el-checkbox {
  color: var(--text-primary) !important;
}

.theme-dark .el-checkbox__label {
  color: var(--text-primary) !important;
}

.theme-dark .el-form-item__label {
  color: var(--text-primary) !important;
}

.theme-dark .el-descriptions {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

.theme-dark .el-descriptions__label {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

.theme-dark .el-descriptions__content {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

.theme-dark .el-tabs__header {
  background-color: var(--bg-card) !important;
}

.theme-dark .el-tabs__nav {
  background-color: var(--bg-card) !important;
}

.theme-dark .el-tabs__item {
  color: var(--text-secondary) !important;
}

.theme-dark .el-tabs__item.is-active {
  color: var(--color-primary) !important;
}

.theme-dark .el-tabs__item:hover {
  color: var(--text-primary) !important;
}

.theme-dark .el-empty {
  color: var(--text-secondary) !important;
}

.theme-dark .el-empty__description {
  color: var(--text-tertiary) !important;
}

.theme-dark .el-skeleton {
  background-color: var(--bg-card) !important;
}

.theme-dark .el-skeleton__item {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 37%, var(--bg-tertiary) 63%) !important;
}

.theme-dark .el-loading-mask {
  background-color: rgba(26, 32, 44, 0.85) !important;
}

.theme-dark .el-message {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color-light) !important;
  color: var(--text-primary) !important;
}

.theme-dark .el-message-box {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color-light) !important;
}

.theme-dark .el-message-box__title {
  color: var(--text-primary) !important;
}

.theme-dark .el-message-box__message {
  color: var(--text-primary) !important;
}

.theme-dark .el-tooltip__popper {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color-light) !important;
  color: var(--text-primary) !important;
}

.theme-dark .el-popover {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color-light) !important;
  color: var(--text-primary) !important;
}

